﻿{extend name="public:base" /}{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">{/block}{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="row search-form">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请输入昵称" name="username" value="{:input('username')}" type="text" class="form-control form-control-lg">
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请输入手机号" name="mobile" value="{:input('mobile')}" type="text" class="form-control form-control-lg">
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请输入付款账户名" name="pay_name" value="{:input('pay_name')}" type="text" class="form-control form-control-lg">
                            </div>
                        </div>

                        {if $user_type == 0}
                        <!--  平台账号  -->
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="company_user_id">
                                <option value="0">请选择分公司/运营中心</option>
                            </select>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="channel_user_id">
                                <option value="0">请选择渠道/团队长</option>
                            </select>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_user_id">
                                <option value="0">请选择门店</option>
                            </select>
                        </div>

                        {elseif $user_type == 2}
                        <!--  分公司/运营中心账号  -->
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="channel_user_id">
                                <option value="0">请选择渠道/团队长</option>
                            </select>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_user_id">
                                <option value="0">请选择门店</option>
                            </select>
                        </div>

                        {elseif $user_type == 3}
                        <!--  渠道账号  -->
                        <div class="col-sm-2 m-b-sm" id="shop-select" style="display: none">
                            <select class="form-control" name="shop_user_id">
                                <option value="0">请选择门店</option>
                                {volist name="shop_user_list" id="vo"}
                                <option value="{$vo.id}" {:input(
                                'shop_user_id') == $vo.id ? 'selected' : ''}>{$vo.username}</option>
                                {/volist}
                            </select>
                        </div>
                        {/if}

                        <div id="ID-laydate-range" class="row col-sm-4 m-b-sm">
                            <div class="col-sm-6 m-b-sm">
                                <div class="input-group">
                                    <input placeholder="请选择开始日期" type="text" autocomplete="off" name="start_date" id="start_date" value="{:input('start_date')}" class="form-control form-control-lg" readonly>
                                </div>
                            </div>
                            <div class="col-sm-6 m-b-sm">
                                <div class="input-group">
                                    <input placeholder="请选择结束日期" type="text" autocomplete="off" name="end_date" id="end_date" value="{:input('end_date')}" class="form-control form-control-lg" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group" style="width: 100%; display: flex; justify-content: space-between">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-solid"></div>
                    <h3>客户数量：{$count}</h3>
                    <div class="hr-line-solid"></div>

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>头像</th>
                                <th>昵称</th>
                                <th>手机号</th>
                                <th class="mobile-hide">客户所属</th>
                                <th class="mobile-hide">收款账户信息</th>
                                <th>老客户</th>
                                <th>复购</th>
                                <th>复购描述</th>
                                <th>打卡状态</th>
                                <th>注册时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td width="3%">{$vo.id}</td>
                                <td width="3%">
                                    <img src="{$vo.avatar == '../../static/images/avatar.png' ? '__ADMIN__/img/avatar.png' : $vo.avatar}" style="width: 100px;height: 100px; object-fit: cover; border-radius: 50%"/>
                                </td>
                                <td width="10%">{$vo.username}</td>
                                <td width="10%">{$vo.mobile}</td>
                                <td width="20%" class="mobile-hide">{$vo.up_company_user_id|getUsername} - {$vo.up_channel_user_id|getUsername} - {$vo.up_shop_user_id|getUsername}</td>
                                <td width="20%" class="mobile-hide">
                                    {if $vo.alipay_name}
                                    支付宝信息{if $vo.account_type == 1}<span style="color: red">（当前使用）</span>{/if}<br>
                                    {$vo.alipay_name ? '姓名：' . $vo.alipay_name . "<br>" : ''}
                                    {$vo.alipay_mobile ? '手机号：' . $vo.alipay_mobile . "
                                    <hr>
                                    " : ''}
                                    {/if}

                                    {if $vo.bank_name}
                                    银行卡信息{if $vo.account_type == 2}<span style="color: red">（当前使用）</span>{/if}<br>
                                    {$vo.bank_user ? '收款人：' . $vo.bank_user . "<br>" : ''}
                                    {$vo.bank_name ? '名称：' . $vo.bank_name . "<br>" : ''}
                                    {$vo.bank_num ? '卡号：' . $vo.bank_num : ''}
                                    {/if}
                                </td>
                                <td width="3%">{$vo.is_vip ? '是' : '否'}</td>
                                <td width="3%">{$vo.is_repurchase ? '是' : '否'}</td>
                                <td width="11%">{$vo.repurchase_desc}</td>
                                <td width="4%">{:in_array($vo.clock_status, [1, 2, 3]) ? '已启用' : '已禁用'}</td>
                                <td width="10%">{:timeFormat($vo.create_time, 'Y-m-d')}</td>
                                <td width="3%" class="project-actions">
                                    {if $vo.clock_status == 0}
                                    <a href="{:url(setClockStatus, ['id' => $vo.id, 'clock_status' => 3])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-success"></i> 启用打卡
                                    </a>
                                    {else}
                                    <a href="{:url(setClockStatus, ['id' => $vo.id, 'clock_status' => 0])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-refuse"></i> 禁止打卡
                                    </a>
                                    {/if}
                                    <a href="{:url(userClockList, ['user_id' => $vo.id])}" class="btn btn-white btn-sm"><i class="iconfont icon-news"></i> 打卡记录
                                    </a>
                                    <a href="{:url(doUser, ['id' => $vo.id])}" class="btn btn-white btn-sm"><i class="iconfont icon-edit"></i> 编辑
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>{include file="public/preview-img-mask" swiper-id="cropper-preview" /}{/block}

{block name="js"}
<script src="/static/laydate/laydate.js"></script>
<script>
    // 检测是否是手机端
    var isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
    if (isMobile) {
        $('.mobile-hide').hide();
    }else{
        $('.mobile-hide').show();
    }

    laydate.render({
        elem: '.screen-date', //指定元素
        format: 'yyyy-MM-dd',
        range: true
    });
    laydate.render({
        elem: '#ID-laydate-range',
        range: ['#start_date', '#end_date']
    });

    // 平台联动数据
    var company_user_list_json = `{$company_user_list_json}` ? JSON.parse(`{$company_user_list_json}`) : [];
    // 分公司/运营中心联动数据
    var channel_user_list_json = `{$channel_user_list_json}` ? JSON.parse(`{$channel_user_list_json}`) : [];

    // 初始化下拉框数据
    function initSelects() {
        // 获取当前URL中的用户类型
        var userType = parseInt('{$user_type}');

        // 初始化平台账号的下拉框（分公司->渠道->门店三级联动）
        if (userType === 0) {
            initCompanyUserSelect();
        }
        // 初始化分公司/运营中心账号的下拉框（渠道->门店）
        else if (userType === 2) {
            initChannelUserSelect();
        } else if (userType == 3) {
            $('#shop-select').show();
        }
    }

    // 初始化分公司/运营中心下拉框
    function initCompanyUserSelect() {
        var companySelect = $('select[name="company_user_id"]');

        // 清空并添加默认选项
        companySelect.empty().append('<option value="0">请选择分公司/运营中心</option>');

        // 添加公司选项
        if (company_user_list_json && company_user_list_json.length > 0) {
            company_user_list_json.forEach(function (company) {
                var option = $('<option></option>')
                  .val(company.id)
                  .text(company.username);

                // 如果URL中有对应的公司ID，设置为选中
                var companyId = `{:input('company_user_id')}`;
                if (companyId && parseInt(company.id) === parseInt(companyId)) {
                    option.prop('selected', true);
                }

                companySelect.append(option);
            });
        }

        // 绑定公司选择变化事件
        companySelect.change(function () {
            var companyId = $(this).val();
            loadChannelUsers(companyId);
        });

        // 如果有初始选中的公司，加载对应的渠道
        var initialCompanyId = companySelect.val();
        if (initialCompanyId && initialCompanyId > 0) {
            loadChannelUsers(initialCompanyId);
        }
    }

    // 根据公司ID加载渠道数据
    function loadChannelUsers(companyId) {
        var channelSelect = $('select[name="channel_user_id"]');

        // 清空并添加默认选项
        channelSelect.empty().append('<option value="0">请选择渠道/团队长</option>');

        if (companyId > 0) {
            // 查找对应的公司
            var company = company_user_list_json.find(function (item) {
                return item.id == companyId;
            });

            // 如果找到公司且有渠道列表
            if (company && company.channel_user_list && company.channel_user_list.length > 0) {
                // 添加渠道选项
                company.channel_user_list.forEach(function (channel) {
                    var option = $('<option></option>')
                      .val(channel.id)
                      .text(channel.username);

                    // 如果URL中有对应的渠道ID，设置为选中
                    var channelId = `{:input('channel_user_id')}`;
                    if (channelId && parseInt(channel.id) === parseInt(channelId)) {
                        option.prop('selected', true);
                    }

                    channelSelect.append(option);
                });
            }
        }

        // 绑定渠道选择变化事件
        channelSelect.off('change').on('change', function () {
            var channelId = $(this).val();
            loadShopUsersByCompany(companyId, channelId);
        });

        // 如果有初始选中的渠道，加载对应的门店
        var initialChannelId = channelSelect.val();
        if (initialChannelId && initialChannelId > 0) {
            loadShopUsersByCompany(companyId, initialChannelId);
        } else {
            // 清空门店选择框
            $('select[name="shop_user_id"]').empty().append('<option value="0">请选择门店</option>');
        }
    }

    // 根据公司ID和渠道ID加载门店数据（平台账号）
    function loadShopUsersByCompany(companyId, channelId) {
        var shopSelect = $('select[name="shop_user_id"]');

        // 清空并添加默认选项
        shopSelect.empty().append('<option value="0">请选择门店</option>');

        if (companyId > 0 && channelId > 0) {
            // 查找对应的公司
            var company = company_user_list_json.find(function (item) {
                return item.id == companyId;
            });

            if (company && company.channel_user_list) {
                // 查找对应的渠道
                var channel = company.channel_user_list.find(function (item) {
                    return item.id == channelId;
                });

                // 如果找到渠道且有门店列表
                if (channel && channel.shop_user_list && channel.shop_user_list.length > 0) {
                    // 添加门店选项
                    channel.shop_user_list.forEach(function (shop) {
                        var option = $('<option></option>')
                          .val(shop.id)
                          .text(shop.username);

                        // 如果URL中有对应的门店ID，设置为选中
                        var shopId = `{:input('shop_user_id')}`;
                        if (shopId && parseInt(shop.id) === parseInt(shopId)) {
                            option.prop('selected', true);
                        }

                        shopSelect.append(option);
                    });
                }
            }
        }
    }

    // 初始化渠道下拉框（分公司/运营中心账号）
    function initChannelUserSelect() {
        var channelSelect = $('select[name="channel_user_id"]');

        // 清空并添加默认选项
        channelSelect.empty().append('<option value="0">请选择渠道/团队长</option>');

        // 添加渠道选项
        if (channel_user_list_json && channel_user_list_json.length > 0) {
            channel_user_list_json.forEach(function (channel) {
                var option = $('<option></option>')
                  .val(channel.id)
                  .text(channel.username);

                // 如果URL中有对应的渠道ID，设置为选中
                var channelId = `{:input('channel_user_id')}`;
                if (channelId && parseInt(channel.id) === parseInt(channelId)) {
                    option.prop('selected', true);
                }

                channelSelect.append(option);
            });
        }

        // 绑定渠道选择变化事件
        channelSelect.change(function () {
            var channelId = $(this).val();
            loadShopUsers(channelId);
        });

        // 如果有初始选中的渠道，加载对应的门店
        var initialChannelId = channelSelect.val();
        if (initialChannelId && initialChannelId > 0) {
            loadShopUsers(initialChannelId);
        }
    }

    // 根据渠道ID加载门店数据
    function loadShopUsers(channelId) {
        var shopSelect = $('select[name="shop_user_id"]');

        // 清空并添加默认选项
        shopSelect.empty().append('<option value="0">请选择门店</option>');

        if (channelId > 0) {
            // 查找对应的渠道
            var channel = channel_user_list_json.find(function (item) {
                return item.id == channelId;
            });

            // 如果找到渠道且有门店列表
            if (channel && channel.shop_user_list && channel.shop_user_list.length > 0) {
                // 添加门店选项
                channel.shop_user_list.forEach(function (shop) {
                    var option = $('<option></option>')
                      .val(shop.id)
                      .text(shop.username);

                    // 如果URL中有对应的门店ID，设置为选中
                    var shopId = `{:input('shop_user_id')}`;
                    if (shopId && parseInt(shop.id) === parseInt(shopId)) {
                        option.prop('selected', true);
                    }

                    shopSelect.append(option);
                });
            }
        }
    }

    // 页面加载完成后初始化
    $(function () {
        initSelects();
    });
</script>{/block}

